<template>
	<div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>

<script>
import axios from "axios";

export default {
	name: 'Pie',
	mounted(){
		
		axios.get('http://localhost:8181/fruit/pievo').then(res => {
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById('myChart'))
			// 绘制图表
			myChart.setOption({
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center'
				},
				series: [
					{
						name: '水果饼状图',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: res.data
					}
				]
			});
		})
	}
}
</script>

